<div class="container no-underline">
  <div class="w-4/5 inline-block mr-3">
    <ti-progressbar [value]="value" [max]="max" [progressClass]="{'custom-progress-warn-bg': value <= 150, 'success-bg': value > 150}">
    </ti-progressbar>
  </div>
  <span>{{100 * value / max }}%</span>
</div>
<button class="mt-3 mr-3" (click)="down()" tiButton color="primary">后退</button>
<button class="mt-3" (click)="up()" tiButton color="primary">前进</button>
<div class="container no-underline mt-3">
  <div class="w-4/5 inline-block mr-3">
    <ti-progressbar [value]="value1" style="height: 10px" [max]="max" [progressClass]="{'custom-progress-active-warn-bg': value1 < 200}">
    </ti-progressbar>
  </div>
  <span>{{100 * value1 / max }}%</span>
</div>
